
import { useState } from 'react';
import { BarChart3, Settings, Play, Square, Eye } from 'lucide-react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Slider } from '@/components/ui/slider';

export default function FeatureExtraction() {
  const [isExtracting, setIsExtracting] = useState(false);
  const [featureType, setFeatureType] = useState('mfcc');
  const [sampleRate, setSampleRate] = useState([44100]);
  const [windowSize, setWindowSize] = useState([1024]);

  const toggleExtraction = () => {
    setIsExtracting(!isExtracting);
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold text-white">特征提取</h2>
          <p className="text-gray-400">MFCC与频谱特征分析</p>
        </div>
        <div className="flex space-x-3">
          <Button
            onClick={toggleExtraction}
            className={isExtracting ? 'bg-red-500 hover:bg-red-600' : 'btn-primary'}
          >
            {isExtracting ? (
              <>
                <Square className="w-4 h-4 mr-2" />
                停止提取
              </>
            ) : (
              <>
                <Play className="w-4 h-4 mr-2" />
                开始提取
              </>
            )}
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
        {/* Feature Extraction Configuration */}
        <Card className="glass-card p-6">
          <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
            <Settings className="w-5 h-5 mr-2" />
            特征提取参数配置
          </h3>
          
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">特征类型</label>
              <Select value={featureType} onValueChange={setFeatureType}>
                <SelectTrigger className="input-advanced">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="mfcc">MFCC</SelectItem>
                  <SelectItem value="spectral">频谱图</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                采样率: {sampleRate[0]} Hz
              </label>
              <Slider
                value={sampleRate}
                onValueChange={setSampleRate}
                max={96000}
                min={8000}
                step={1000}
                className="mt-2"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">
                窗函数大小: {windowSize[0]}
              </label>
              <Slider
                value={windowSize}
                onValueChange={setWindowSize}
                max={4096}
                min={256}
                step={256}
                className="mt-2"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-300 mb-2">重叠率</label>
              <Select defaultValue="50">
                <SelectTrigger className="input-advanced">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="25">25%</SelectItem>
                  <SelectItem value="50">50%</SelectItem>
                  <SelectItem value="75">75%</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </Card>

        {/* Feature Data Display */}
        <div className="xl:col-span-2">
          <Card className="glass-card p-6 h-full">
            <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
              <Eye className="w-5 h-5 mr-2" />
              特征提取数据展示
            </h3>

            <Tabs defaultValue="data" className="h-full">
              <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="data">特征类型和特征数据</TabsTrigger>
                <TabsTrigger value="visualization">可视化图表</TabsTrigger>
              </TabsList>
              
              <TabsContent value="data" className="mt-4">
                <div className="grid grid-cols-2 gap-4 mb-4">
                  <div className="p-4 bg-black/20 rounded-lg">
                    <div className="text-green-400 font-semibold mb-2">特征类型</div>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-gray-400">MFCC</span>
                        <span className="text-green-400">123467690</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">光谱图</span>
                        <span className="text-green-400">938794221</span>
                      </div>
                    </div>
                  </div>
                  
                  <div className="p-4 bg-black/20 rounded-lg">
                    <div className="text-blue-400 font-semibold mb-2">处理状态</div>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span className="text-gray-400">已处理</span>
                        <span className="text-blue-400">1,234 帧</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-400">进度</span>
                        <span className="text-blue-400">85%</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="overflow-x-auto">
                  <table className="w-full text-sm">
                    <thead>
                      <tr className="border-b border-gray-700">
                        <th className="text-left py-2 text-gray-400">帧序号</th>
                        <th className="text-left py-2 text-gray-400">特征维度</th>
                        <th className="text-left py-2 text-gray-400">数值范围</th>
                        <th className="text-left py-2 text-gray-400">状态</th>
                      </tr>
                    </thead>
                    <tbody>
                      {Array.from({ length: 8 }, (_, i) => (
                        <tr key={i} className="border-b border-gray-800">
                          <td className="py-2 text-gray-300">{i + 1}</td>
                          <td className="py-2 text-gray-300">13</td>
                          <td className="py-2 text-gray-300">[-2.5, 3.2]</td>
                          <td className="py-2">
                            <span className="px-2 py-1 bg-green-500/20 text-green-400 rounded-full text-xs">
                              完成
                            </span>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </TabsContent>
              
              <TabsContent value="visualization" className="mt-4">
                <div className="grid grid-cols-1 gap-4">
                  {/* FFT Features */}
                  <div>
                    <h4 className="text-sm font-medium text-gray-300 mb-2">FFT特征分布图表</h4>
                    <div className="h-32 bg-black/20 rounded-lg p-4 flex items-end justify-between space-x-1">
                      {Array.from({ length: 50 }, (_, i) => (
                        <div
                          key={i}
                          className="bg-gradient-to-t from-purple-500 to-pink-400 rounded-sm"
                          style={{
                            height: `${Math.random() * 80 + 10}%`,
                            width: '1.8%',
                          }}
                        />
                      ))}
                    </div>
                  </div>

                  {/* Time Series Features */}
                  <div>
                    <h4 className="text-sm font-medium text-gray-300 mb-2">时间序列特征图表</h4>
                    <div className="h-32 bg-black/20 rounded-lg p-4">
                      <svg width="100%" height="100%" viewBox="0 0 400 100" className="text-blue-400">
                        <path
                          d={`M 0,50 ${Array.from({ length: 40 }, (_, i) => 
                            `L ${i * 10},${50 + Math.sin(i * 0.3) * 20}`
                          ).join(' ')}`}
                          stroke="currentColor"
                          strokeWidth="2"
                          fill="none"
                        />
                      </svg>
                    </div>
                  </div>

                  {/* Frequency Analysis */}
                  <div>
                    <h4 className="text-sm font-medium text-gray-300 mb-2">频率分析特征图表</h4>
                    <div className="h-32 bg-black/20 rounded-lg p-4">
                      <div className="w-full h-full relative">
                        {Array.from({ length: 20 }, (_, i) => (
                          <div
                            key={i}
                            className="absolute bottom-0 bg-gradient-to-t from-green-500 to-emerald-400 rounded-t-sm"
                            style={{
                              left: `${i * 5}%`,
                              width: '4%',
                              height: `${Math.random() * 70 + 10}%`,
                            }}
                          />
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </TabsContent>
            </Tabs>
          </Card>
        </div>
      </div>

      {/* Analysis Results */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="glass-card p-6">
          <h3 className="text-lg font-semibold mb-4 text-white">谐波分析特征</h3>
          <div className="space-y-3">
            <div className="flex justify-between">
              <span className="text-gray-400">基频</span>
              <span className="text-green-400">440 Hz</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-400">谐波数量</span>
              <span className="text-green-400">12</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-400">THD</span>
              <span className="text-green-400">2.3%</span>
            </div>
          </div>
        </Card>

        <Card className="glass-card p-6">
          <h3 className="text-lg font-semibold mb-4 text-white">噪声分析特征</h3>
          <div className="space-y-3">
            <div className="flex justify-between">
              <span className="text-gray-400">SNR</span>
              <span className="text-blue-400">25.6 dB</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-400">噪声功率</span>
              <span className="text-blue-400">-45 dBm</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-400">噪声类型</span>
              <span className="text-blue-400">白噪声</span>
            </div>
          </div>
        </Card>

        <Card className="glass-card p-6">
          <h3 className="text-lg font-semibold mb-4 text-white">频率分析特征</h3>
          <div className="space-y-3">
            <div className="flex justify-between">
              <span className="text-gray-400">中心频率</span>
              <span className="text-purple-400">2.1 kHz</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-400">带宽</span>
              <span className="text-purple-400">800 Hz</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-400">频率稳定性</span>
              <span className="text-purple-400">优秀</span>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}
